<template>
  <div class="app-container">
    <el-row type="flex" class="row-bg btn-row" justify="end">
      <el-button class="filter-item" size="mini" v-if="$store.state.user.user_perms.includes('612')" @click="add" type="primary" icon="el-icon-plus">{{$t('cards.add')}}</el-button>
    </el-row>
    <el-form :inline="true" :model="q" class="demo-form-inline query" label-position="left" >
      <el-form-item :label="$t('cards.merchant')">
        <el-select v-model="q.mch_id" :label="$t('cards.pls_choose')">
          <el-option :label="$t('cards.all')" :value=null></el-option>
          <el-option v-for="mch of MchList" :key="mch.id" :label="mch.name" :value="mch.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.name" :placeholder="$t('cards.bankcard_name')" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.account_number" :placeholder="$t('cards.bankcard_no')" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.phone" :placeholder="$t('cards.phone')" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.account_holder" :placeholder="$t('cards.cardholder_name')" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.bank" :placeholder="$t('cards.bank')" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item :label="$t('cards.status')">
        <el-select v-model.number="q.status" :placeholder="$t('cards.status')">
          <el-option :label="$t('cards.all')" :value=null></el-option>
          <el-option v-for="(statu, index) of statusArray" :key="index" :label="statu" :value="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('cards.acct_bal')">
        <el-input v-model="balance.$gte" :placeholder="$t('cards.more')" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="balance.$lt" :placeholder="$t('cards.more')" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">{{$t('cards.search')}}</el-button>
        <el-button type="danger" @click="reload">{{$t('cards.reset')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="bankcardData.list" v-loading.body="listLoading"  @sort-change="sortlist"  element-loading-text="Loading" stripe border fit highlight-current-row>
      <el-table-column prop="id" label='ID' width="80"></el-table-column>
      <el-table-column prop="name" :label="$t('cards.name')" width="100"></el-table-column>
      <el-table-column prop="mch_id" :label="$t('cards.mch_id')" width="120"></el-table-column>
      <el-table-column prop="account_number" :label="$t('cards.acct_no')"  width="160"></el-table-column>
      <el-table-column prop="account_holder" :label="$t('cards.acct_holder')" min-width="100"></el-table-column>
      <el-table-column prop="bank" :label="$t('cards.bank')" min-width="150"></el-table-column>
      <el-table-column prop="phone" :label="$t('cards.phone')" min-width="150"></el-table-column>
      <el-table-column prop="subbranch" :label="$t('cards.subbranch')" min-width="150"></el-table-column>
      <el-table-column prop="balance" :label="$t('cards.balance')" min-width="100"></el-table-column>
      <el-table-column prop="desc" :label="$t('cards.desc')" min-width="150"></el-table-column>
      <el-table-column prop="online_status" :label='$t("cards.online_status")' min-width="100">
        <template slot-scope="scope">{{onlineStatusArray[scope.row.online_status]}}</template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('cards.status')" width="100">
         <template slot-scope="scope">{{getStatus(scope.row.status)}}</template>
      </el-table-column>
      <el-table-column prop="updated_at" :label="$t('cards.updated_at')" sortable width="180"></el-table-column>
      <el-table-column prop="created_at" :label="$t('cards.created_at')" width="180"></el-table-column>
      <el-table-column :label="$t('cards.operation')" width="220" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button type="text" size="small" v-if="roles > 4 && $store.state.user.user_perms.includes('613')" @click="update(scope.row)">[{{$t('cards.edit')}}]</el-button>
            <el-button type="text" size="small" v-if="roles > 4 && $store.state.user.user_perms.includes('614')" @click="remove(scope.row)">[{{$t('cards.delete')}}]</el-button>
             <el-button type="text" size="small" v-if="roles > 4 && $store.state.user.user_perms.includes('616')" @click="viewhistory(scope.row.id, scope.row.name)">[{{$t('cards.history')}}]</el-button>
            <el-button type="text" size="small" v-if="roles > 4 && $store.state.user.user_perms.includes('615')" @click="stats(scope.row.name)">[{{$t('cards.stats')}}]</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.$size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="bankcardData.total_count">
      </el-pagination>
    </div>
    <save-bankcard v-if="showBankcardInfo" :showBankcardInfo.sync ="showBankcardInfo" :bankcard_id="bankcard_id" :MchList="MchList" :bankcard_type="bankcard_type"></save-bankcard>
    <view-statistics v-if="showStatistics" :showStatistics.sync ="showStatistics" :cardCode="cardCode" :cardStatsList="cardStatsList"></view-statistics>
    <view-login-history v-if="showLoginHistory" :showLoginHistory.sync ="showLoginHistory" :cardId="cardId" :cardhistory="cardhistory" :cardName="cardName"></view-login-history>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import saveBankcard from './saveBankcard'
import viewStatistics from './viewStatistics'
import { getBankcardList, deleteBankcard, getMchList } from '@/api/merchant'
import viewLoginHistory from './viewLoginHistory'

export default {
  components: { saveBankcard, viewStatistics, viewLoginHistory },
  data() {
    return {
      bankcardData: {},
      q: {$size: 30, $page: 1, type: 2},
      listLoading: true,
      showBankcardInfo: false,
      showStatistics: false,
      showLoginHistory: false,
      MchList: [],
      cardStatsList: [],
      balance: {},
      statusArray: [this.$t('cards.inactive'), this.$t('cards.active')],
      onlineStatusArray: [this.$t('cards.offline'), this.$t('cards.online')],
      bankcard_id: null,
      bankcard_type: 2,
      cardCode: null,
      cardId: null,
      cardhistory: []
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  filters: {},
  created() {
    this.getList()
    this.getMchList()
  },
  deactivated(){
    this.listLoading = false
  },
  methods: {
     viewhistory(id, name){
         this.showLoginHistory = true
         this.cardId = id
         this.cardName = name
    },
     getStatus(status){
      return status === 0 ? this.$t('cards.inactive') : this.$t('cards.active')
    },
    sortlist(sort){
      this.q.$orderby = sort.prop
      this.getList()
    },
    add(){
      this.bankcard_id = null
      this.showBankcardInfo = true
    },
    update(row){
      this.bankcard_id = row.id
      this.showBankcardInfo = true
    },
    query(){
      this.getList()
    },
    reload() {
      this.q = {$size: 30, $page: 1, type: 2}
      this.balance = {}
      this.getList()
    },
    remove(row){
      this.$confirm(this.$t('cards.delete_verify') + ` ${row.id} ？`, this.$t('cards.merchant'), {
       confirmButtonText: this.$t('cards.confirm'),
        cancelButtonText: this.$t('cards.cancel'),
        type: 'warning'
      }).then(() => {
        deleteBankcard(row.id).then(res => {
          if(res.status === 0){
            this.$message({ type: 'success', message: this.$t('cards.success_delete') })
            this.getList()
          }
        })
      }).catch(() => {
      })
    },
    stats(data){
      this.cardCode = data
      this.showStatistics = true
    },
    handleSizeChange (val) {
      this.q.$size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.q.$page = val
      this.getList()
    },
    getList() {
      if(this.balance.$gte || this.balance.$lt){
        this.q.balance = this.balance
      }
      let params = Object.assign({
        $orderby: '-updated_at',
        type: 2
      }, this.q)
      this.listLoading = true
      getBankcardList(params).then(res => {
        if (res.status === 0) {
          this.listLoading = false
          this.bankcardData = res.data
        }
      })
    },
    getMchList(){
      getMchList({$size: -1}).then(res => {
        if (res.status === 0) {
          this.MchList = res.data.list
        }
      })
    }
  },
  watch: {
    showBankcardInfo() {
      if(!this.showBankcardInfo){
        this.getList()
      }
    }
  }
}
</script>
<style>
  .btn-row{
    padding: 0 0 1rem 0;
  }
</style>
